<template>
  <div id="home">
    <el-row>
      <el-col>
        <el-affix>
          <RouterGuide subtitle=""></RouterGuide>
        </el-affix>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-row>
          <IntegratedModule class="left_box"></IntegratedModule>
        </el-row>
        <el-row>
          <PopularMerchants class="left_box"></PopularMerchants>
        </el-row>
        <el-row>
          <ShrimpGuide class="left_box"></ShrimpGuide>
        </el-row>
      </el-col>
      <el-col :span="7" :offset="1">
        <el-affix :offset="68">
          <el-row>
            <el-col>
              <InformationRelease class="right_box"></InformationRelease>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <TransactionRecord class="right_box"></TransactionRecord>
            </el-col>
          </el-row>
        </el-affix>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RouterGuide from "@/components/Public/RouterGuide.vue";
import IntegratedModule from "@/components/Home/IntegratedModule.vue";
import PopularMerchants from "@/components/Home/PopularMerchants.vue";
import ShrimpGuide from "@/components/Home/ShrimpGuide.vue";
import InformationRelease from "@/components/Home/InformationRelease.vue";
import TransactionRecord from "@/components/Home/TransactionRecord.vue";

export default{
  name: "Home",
  components: {TransactionRecord, InformationRelease, ShrimpGuide, PopularMerchants, IntegratedModule, RouterGuide}
}
</script>

<style scoped>
.left_box {
  padding-top: 10px;
  width: 100%;
}

.right_box {
  float: right;
  margin-top: 10px;
  width: 100%;
}
</style>